<!-- 事件详情 -->
<template>
	<view class="viewBg">
		<view class="eventTitle">{{eventTitle}}</view>
		<view class="eventTime">提报时间：{{eventTime}}</view>
		<view class="eventDesc">{{eventDesc}}</view>
		<view class="lineH1"></view>
		<view class="mapView">
			<!-- <map :latitude="location.latitude" :longitude="location.longitude" :markers="covers"> -->
			<!-- </map> -->
			<image :src="mapImgae" mode="aspectFill"></image>
		</view>
        <view style="margin: 10upx">{{event_address}}</view>
		<view class="imageBg">
			<view class="" v-for="(item,index) in images" :key="index">
				<image class="image" :src="item" mode="aspectFill" @click="previewImage(index)"></image>
			</view>

		</view>
		<view class="lyx-video-baba" v-if="videoPath">
			<video :src="videoPath" controls  :show-center-play-btn="true" class="lyx-video"></video>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in events" :key="index">
				<view class="uni-list-cell-navigate">
					<view class="dotView"></view>
					<view class="event">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="lineH20"></view>
		<!-- 时间轴 -->
		<view class="uni-timeline" style="padding: 30upx 20upx;background-color: #fff;">
			<view class="uni-timeline-item uni-timeline-first-item" v-if="listFirst !== null">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="timeline-text">经办人员:{{listFirst.handleByName}} 【{{listFirst.role_name}}】</view>
					<view class="timeline-text">处理内容:{{listFirst.content}}</view>
					<view class="timeline-text" v-if="listFirst.status==1">处理时间:{{listFirst.handleTime}}</view>
					<view class="timeline-detail" @click="checkDetail(listFirst)">查看详情 >></view>
				</view>
			</view>
			<view class="uni-timeline-item" v-for="(item,index) in list" :key="index" v-if="list !== null">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="timeline-text">经办人员:{{item.handleByName}}【{{item.role_name}}】</view>
					<view class="timeline-text">处理内容:{{item.content}}</view>
					<view class="timeline-text" v-if="item.status==1">处理时间:{{item.handleTime}}</view>
					<view class="timeline-text" v-if="item.remark"  style="color: red;">{{item.remark}}</view>
					<view class="timeline-text" v-if="item.duban.length>0" v-for="(du,index1) in item.duban" :key="index1" style="color: orange;">{{du.name}}督办:{{du.time}}</view>
					<view class="timeline-detail" @click="checkDetail(item)">查看详情 >></view>
				</view>
			</view>
			<view class="uni-timeline-item uni-timeline-last-item" v-if="listLast !== null">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="timeline-text">经办人员:{{listLast.handleByName}}【{{listLast.role_name}}】</view>
					<view class="timeline-text">处理内容:{{listLast.content}}</view>
                    <view class="timeline-text" v-if="listLast.status==1">处理时间:{{listLast.handleTime}}</view>
                    <view class="timeline-text" v-if="listLast.duban.length>0" v-for="(du,index1) in listLast.duban" :key="index1" style="color: orange;">{{du.name}}督办:{{du.time}}</view>
                    <view class="timeline-detail" @click="checkDetail(listLast)">查看详情 >></view>
				</view>
			</view>
            <view style="height: 80upx"></view>
		</view>

		<view class="foot" v-if="type == 1">
			<!-- <view class="footBtnView" > -->
			<!-- <button type="primary" >{{btn.title}}</button>
			-->
			<view :class="['button','bg-'+index]" v-for="(item ,index) in action" :key="index" @click="handleEvent(item)">{{item.name}}</view>
			<!-- </view> -->

		</view>
	</view>
</template>

<script>
	import amap from "../../../common/amap-wx.js"

	var util = require('../../../common/util.js');
	var formatLocation = util.formatLocation;

	export default {
		data() {
			return {
				eventTitle: '',
				eventTime: '2019-3-28',
				eventDesc: '详细描述',
				images: [],
                event_address:'',
				videoPath: '',
				events: [],

				location: {},
				mapImgae: '',
				//列表
				listFirst: null,
				list: null,
				listLast: null,

				action:[],

				eventId:'',
				flowId:'',
                type: ''

			};
		},
		onLoad(event) {
			this.type = event.type
			this.getEventDetail(event.id);
		},
		methods: {
			getEventDetail(id) {
				var self = this;
				self.$http.get('ac/xagrid/appEventServiceImpl/getEventDetails', {
					id: id
				}).then((res) => {
					self.eventTitle = res.data.questionTitle;
					self.eventTime = res.data.dateTime;
					self.eventDesc = res.data.questionContent;
					self.eventId = res.data.id;
					self.flowId = res.data.flowId;
					self.event_address = res.data.event_address;
					console.log("事件id"+self.eventId+'事件流转id'+self.flowId);
					console.log('时间:' + self.eventTime + '描述：' + self.eventDesc);
					var amapPlugin = new amap.AMapWX({
						key: 'fbb5ddc12d6183eba23f27639f49757a'
					})
					uni.getSystemInfo({
						success: function(data) {
							var height = data.screenHeight;
							var width = data.screenWidth;
							var size = width+'*'+'200';
							console.log('地图尺寸'+size);
							var location = formatLocation(res.data.eventLongitude,res.data.eventLatitude);
							amapPlugin.getStaticmap({
								zoom: 14,
								size: size,
								location:location.longitude+','+location.latitude,
								markers: 'mid,0xFF0000,A:' + location.longitude + ',' + location.latitude,
								success: function(mapData) {
									self.mapImgae = mapData.url;
								}
							})
						}
					})


					if (res.data.questionImg) {
						var imagesUrl = res.data.questionImg.split(',');
						for (var i = 0; i < imagesUrl.length; i++) {
							imagesUrl[i] = 'http://image.tripln.top/gridfile' + imagesUrl[i];
						}
						self.images = imagesUrl;
					}
					if (res.data.questionVideo) {
						var videoP = 'http://image.tripln.top/gridfile' + res.data.questionVideo;
						self.videoPath = videoP;
					}
					if (res.data.eventType === '1') {
						self.events.push('事件类型 : 企业事件');
						self.events.push(res.data.companyName);
					} else if(res.data.eventType === '2') {
						self.events.push('事件类型 : 普通事件');
					} else{
						self.events.push('事件类型 : 应急事件');
					}
					self.events.push('任务类型 : '+res.data.taskTypeName);
					var targets_type_name = res.data.targets_type_name;
					if(targets_type_name == '' || targets_type_name == undefined || targets_type_name == null){
						self.events.push('涉事对象 : ');
					}else{
						self.events.push('涉事对象 : '+targets_type_name);
					}
                    var questionTypeName = res.data.questionTypeName;
                    if(questionTypeName == '' || questionTypeName == undefined || questionTypeName == null){
                    	self.events.push('问题类型 : ');
                    }else{
                    	self.events.push('问题类型 : '+res.data.questionTypeName);
                    }
					

					if (res.data.flows && res.data.flows.length>0) {
						let runList = res.data.flows
						runList.forEach(item=>{
							if(item.superviseContent != '' && item.superviseContent != null && item.superviseContent != undefined){
								console.log('组装数组')
								item.duban = JSON.parse(item.superviseContent)
							}else{
								item.duban = []
							}
						})
						self.list = runList;
						console.log(self.list)
					}
					if (self.list !== null) {
						self.listFirst = self.list.shift();
					}
					if (self.list !== null && self.list.length > 0) {
						self.listLast = self.list.pop();
					}
					self.action = res.data.action;
				})
			},
			previewImage(index){
				uni.previewImage({
					urls:this.images,
					current:String(index),
				})
			},
			handleEvent(item){
				console.log('详情页item'+encodeURIComponent(JSON.stringify(item)));
				uni.navigateTo({
					url:'../reportFeedback/reportFeedback?eventId='+this.eventId + '&flowId='+this.flowId + '&action='+ encodeURIComponent(JSON.stringify(item)),
				})
			},
			checkDetail(item){
				console.log('事件流程详情：'+JSON.stringify(item));
				if(item.status == 0){
					uni.showModal({
						title:'提示',
						content:'未处理完毕',
					})
				}else{
					uni.navigateTo({
						url:'../reportFeedback/reportFeedback?eventFlowId=' + item.flowId,
					})
				}

			}
		}
	}
</script>

<style>
	uni-view{
		line-height:inherit;
	}
	.lyx-video{
		width: 100%;
	}
	.lyx-video-baba{
		padding: 0 20upx 0 20upx;
		width: 94%;
		overflow: hidden;
	}
	.viewBg {
		width: 100%;
		height: 100%;
		overflow: hidden;
		/* background-color: #0FAEFF; */
	}

	.lineH20 {
		height: 20upx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.uni-list-cell-navigate {
		justify-content: flex-start;
	}

	.lineH1 {

		height: 2upx;
		/* width: 100%; */
		margin-left: 10upx;
		background-color: #F7F7F7;
	}

	.eventTitle {
		margin: 20upx 20upx 0 20upx;
		font-size: 44upx;
	}

	.eventTime {
		margin: 20upx;
		font-size: 20upx;
		color: #B2B2B2;
	}

	.eventDesc {
		/* width: 100%; */
		/* height: 100%; */
		margin: 20upx;
		font-size: 34upx;
		color: #555555;
		flex-wrap: wrap;
	}

	.event {
		margin-left: 10upx;
	}

	.mapView {
		/* width: 100%; */
		display: flex;
		height: 360upx;
		margin: 20upx 20upx 0 20upx;

	}
	.mapView image{
		width: 100%;
		height: 100%;
	}
	/* map {
		margin: 10upx 0;
		width: 414upx;
		height: 300upx;

	} */

	.dotView {
		width: 10upx;
		height: 10upx;
		border-radius: 5upx;
		margin: 0 20upx;
		background-color: #0FAEFF;
	}

	.imageBg {
		width: 100%;
		height: 100%;
		display: flex;
		margin: 20upx;
		flex-direction: row;
		/* margin: default; */
		flex-wrap: wrap;
	}

	.image {
		width: 150upx;
		height: 150upx;
		margin: 10upx;
	}

	.timeline-text {
		font-size: 28upx;
		color: #666666;
		letter-spacing: 2upx;
	}
	.uni-timeline-item{
		left: 40upx;
	}
	.timeline-detail {
		font-size: 28upx;
		color: #007AFF;
		letter-spacing: 2upx;
	}

	.foot {
		position: fixed;
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 90upx;
		min-height: 90upx;
		left: 0upx;
		bottom: 0upx;
		overflow: hidden;
		background-color: #EEEEEE;
		justify-content: center;
		align-items: center;
		z-index: 999;

	}

	.footBtnView {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #33DCE8;
		margin: 10upx;
	}

	.button {
		background-color: #8A6DE9;
		border-radius: 40upx;
		margin: 5upx 20upx;
		color: #FFFFFF;
		padding: 10upx 46upx 10upx 46upx;
	}
	.bg-0{
		background-color: #4b97f9;
	}
	.bg-1{
		background-color: #009a44;
	}
	.bg-2{
		background-color: #ed6942;
	}
</style>
